<template>
  <ProCard
    :title="entity.name"
    :badge="getStatusBadge(entity.status)"
    :badge-color="getStatusColor(entity.status)"
    :hoverable="true"
    :loading="loading"
    class="life-entity-card"
    @refresh="handleRefresh"
  >
    <template #extra>
      <a-dropdown>
        <a-button type="text" :icon="h(MoreOutlined)" />
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="view">
              <eye-outlined />
              查看详情
            </a-menu-item>
            <a-menu-item key="edit">
              <edit-outlined />
              编辑
            </a-menu-item>
            <a-menu-item key="clone">
              <copy-outlined />
              克隆
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="delete" danger>
              <delete-outlined />
              删除
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>

    <div class="entity-content">
      <!-- 基本信息 -->
      <div class="entity-info">
        <a-descriptions :column="1" size="small">
          <a-descriptions-item label="类型">
            <a-tag :color="getTypeColor(entity.type)">
              {{ getTypeLabel(entity.type) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="意识等级">
            <a-progress
              :percent="getConsciousnessPercent(entity.consciousnessLevel)"
              :stroke-color="getConsciousnessColor(entity.consciousnessLevel)"
              size="small"
              :show-info="false"
            />
            <span class="consciousness-label">
              {{ getConsciousnessLabel(entity.consciousnessLevel) }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ formatDate(entity.createdAt) }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- DNA 信息 -->
      <div v-if="entity.digitalDNA" class="entity-dna">
        <h4>数字DNA</h4>
        <div class="dna-traits">
          <a-tag
            v-for="trait in entity.digitalDNA.traits?.slice(0, 3)"
            :key="trait"
            size="small"
            color="blue"
          >
            {{ trait }}
          </a-tag>
          <a-tag
            v-if="entity.digitalDNA.traits?.length > 3"
            size="small"
            color="default"
          >
            +{{ entity.digitalDNA.traits.length - 3 }}
          </a-tag>
        </div>
        <div class="dna-compatibility">
          <span class="compatibility-label">兼容性指数:</span>
          <a-rate
            :value="entity.digitalDNA.compatibilityIndex / 20"
            :count="5"
            :allow-half="true"
            :disabled="true"
            size="small"
          />
        </div>
      </div>

      <!-- 关系网络 -->
      <div v-if="showRelations && entity.relationships?.length" class="entity-relations">
        <h4>关系网络</h4>
        <div class="relations-list">
          <a-tooltip
            v-for="relation in entity.relationships.slice(0, 5)"
            :key="relation.id"
            :title="`${relation.relationType}: ${relation.targetEntity.name}`"
          >
            <a-avatar
              :size="24"
              :style="{ backgroundColor: getRelationColor(relation.relationType) }"
            >
              {{ relation.targetEntity.name.charAt(0) }}
            </a-avatar>
          </a-tooltip>
          <a-avatar
            v-if="entity.relationships.length > 5"
            :size="24"
            style="background-color: #f0f0f0; color: #999"
          >
            +{{ entity.relationships.length - 5 }}
          </a-avatar>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="entity-stats">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-statistic
              title="活跃度"
              :value="entity.activityLevel || 0"
              suffix="%"
              :value-style="{ fontSize: '14px' }"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="影响力"
              :value="entity.influenceScore || 0"
              :value-style="{ fontSize: '14px' }"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="连接数"
              :value="entity.relationships?.length || 0"
              :value-style="{ fontSize: '14px' }"
            />
          </a-col>
        </a-row>
      </div>
    </div>

    <template #actions>
      <a-button type="primary" size="small" @click="$emit('view', entity)">
        查看详情
      </a-button>
      <a-button size="small" @click="$emit('edit', entity)">
        编辑
      </a-button>
    </template>
  </ProCard>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { ProCard } from '../Pro'
import {
  MoreOutlined,
  EyeOutlined,
  EditOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import { formatDate } from '@/utils/dateUtils'

interface LifeEntity {
  id: string
  name: string
  type: string
  status: string
  consciousnessLevel: string
  createdAt: string
  activityLevel?: number
  influenceScore?: number
  digitalDNA?: {
    traits: string[]
    compatibilityIndex: number
  }
  relationships?: Array<{
    id: string
    relationType: string
    targetEntity: {
      name: string
    }
  }>
}

interface LifeEntityCardProps {
  entity: LifeEntity
  loading?: boolean
  showRelations?: boolean
}

const props = withDefaults(defineProps<LifeEntityCardProps>(), {
  loading: false,
  showRelations: true,
})

const emit = defineEmits<{
  view: [entity: LifeEntity]
  edit: [entity: LifeEntity]
  clone: [entity: LifeEntity]
  delete: [entity: LifeEntity]
  refresh: [entity: LifeEntity]
}>()

// 状态相关方法
const getStatusBadge = (status: string) => {
  const statusMap: Record<string, string> = {
    ACTIVE: '活跃',
    INACTIVE: '休眠',
    EVOLVING: '进化中',
    ARCHIVED: '已归档',
  }
  return statusMap[status] || status
}

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    ACTIVE: 'green',
    INACTIVE: 'orange',
    EVOLVING: 'blue',
    ARCHIVED: 'gray',
  }
  return colorMap[status] || 'default'
}

// 类型相关方法
const getTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    CORPORATE: '企业生命体',
    URBAN: '城市生命体',
    INDIVIDUAL: '个体生命体',
    CONCEPTUAL: '概念生命体',
    HYBRID: '混合生命体',
    SYSTEM: '系统生命体',
  }
  return typeMap[type] || type
}

const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    CORPORATE: 'blue',
    URBAN: 'green',
    INDIVIDUAL: 'orange',
    CONCEPTUAL: 'purple',
    HYBRID: 'cyan',
    SYSTEM: 'red',
  }
  return colorMap[type] || 'default'
}

// 意识等级相关方法
const getConsciousnessLabel = (level: string) => {
  const levelMap: Record<string, string> = {
    BASIC: '基础意识',
    INTERMEDIATE: '中级意识',
    ADVANCED: '高级意识',
    SUPER: '超级意识',
    TRANSCENDENT: '超越意识',
  }
  return levelMap[level] || level
}

const getConsciousnessPercent = (level: string) => {
  const percentMap: Record<string, number> = {
    BASIC: 20,
    INTERMEDIATE: 40,
    ADVANCED: 60,
    SUPER: 80,
    TRANSCENDENT: 100,
  }
  return percentMap[level] || 0
}

const getConsciousnessColor = (level: string) => {
  const colorMap: Record<string, string> = {
    BASIC: '#52c41a',
    INTERMEDIATE: '#1890ff',
    ADVANCED: '#722ed1',
    SUPER: '#eb2f96',
    TRANSCENDENT: '#f5222d',
  }
  return colorMap[level] || '#1890ff'
}

// 关系相关方法
const getRelationColor = (relationType: string) => {
  const colorMap: Record<string, string> = {
    COLLABORATION: '#52c41a',
    COMPETITION: '#f5222d',
    DEPENDENCY: '#1890ff',
    FUSION: '#722ed1',
    COMMUNICATION: '#13c2c2',
  }
  return colorMap[relationType] || '#1890ff'
}

// 事件处理
const handleRefresh = () => {
  emit('refresh', props.entity)
}

const handleMenuClick = ({ key }: { key: string }) => {
  switch (key) {
    case 'view':
      emit('view', props.entity)
      break
    case 'edit':
      emit('edit', props.entity)
      break
    case 'clone':
      emit('clone', props.entity)
      break
    case 'delete':
      emit('delete', props.entity)
      break
  }
}
</script>

<style scoped>
.life-entity-card {
  height: 100%;
  transition: all 0.3s ease;
}

.entity-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entity-info {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.consciousness-label {
  margin-left: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.entity-dna h4,
.entity-relations h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.dna-traits {
  margin-bottom: 8px;
}

.dna-compatibility {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compatibility-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.relations-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.entity-stats {
  background: #fafafa;
  padding: 12px;
  border-radius: 6px;
  margin-top: 8px;
}

/* 暗黑模式适配 */
[data-theme="dark"] .entity-info {
  border-color: #303030;
}

[data-theme="dark"] .consciousness-label {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .entity-dna h4,
[data-theme="dark"] .entity-relations h4 {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .compatibility-label {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .entity-stats {
  background: rgba(255, 255, 255, 0.04);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .entity-content {
    gap: 12px;
  }
  
  .entity-stats {
    padding: 8px;
  }
}
</style>